<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
          <a-form-item label="表名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入表名称" v-decorator.trim="[ 'tableName', validatorRules.tableName]"/>
          </a-form-item>
          <a-form-item label="表类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  v-decorator="[ 'type']"/>
          </a-form-item>
          <a-form-item label="表单风格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  v-decorator="[ 'formStyle']"/>
          </a-form-item>
          <a-form-item label="是否生成" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input  v-decorator="[ 'createState']"/>
          </a-form-item>
          <a-form-item label="表描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'tableDesc']"/>
          </a-form-item>
      </a-form>
    </a-spin>
      <div>
          <a-card :bordered="false" v-show="isDetail">
              <a-tabs defaultActiveKey="1">
                  <a-tab-pane tab="数据库属性" key="1">
                      <table-tab1 ref="TableTab1"></table-tab1>
                  </a-tab-pane>
                  <a-tab-pane tab="表单属性" key="2">
                      表单属性
                  </a-tab-pane>
                  <a-tab-pane tab="列表属性" key="3">
                      列表属性
                  </a-tab-pane>
                  <a-tab-pane tab="索引" key="4">
                      索引
                  </a-tab-pane>
                  <a-tab-pane tab="按钮属性" key="5">
                      按钮属性
                  </a-tab-pane>
              </a-tabs>
          </a-card>
      </div>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
        <a-button @click="handleCancel" style="margin-right: .8rem">取消</a-button>
        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import pick from 'lodash.pick'
  import {addBpmTable,editBpmTable} from '@/api/api'
  import TableTab1 from "./TableTab1";
  export default {
    name: "TableModal",
    components: {
        TableTab1
    },
    data () {
      return {
        modalWidth:800,
        drawerWidth:700,
        isDetail:true,
        id:"",
        disableSubmit:false,
        dateFormat:"YYYY-MM-DD",
          validatorRules: {
              tableName: {rules: [{required: true, message: '请输入表单名称!'}]},
          },
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        headers:{},
        confirmLoading: false,
        form:this.$form.createForm(this),
      }
    },

    methods: {
      refresh () {
          this.id=""
      },
      add () {
        this.refresh();
        this.edit({"id":this.id});
      },
      edit (record) {
        let that = this;
        that.form.resetFields();
        that.id = record.id;
        that.visible = true;
        that.model = Object.assign({}, record);
        that.$nextTick(() => {
          that.form.setFieldsValue(pick(this.model,'tableName','type','formStyle','createState','tableDesc'))
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      handleSubmit () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            delete formData.createTime;
            let obj;
            let tableFields=this.$refs.TableTab1.getAllData();
            console.log(tableFields)
            //formData.tableFields=JSON.stringify(tableFields);
            console.log(formData)
            if(!this.model.id){
              obj=addBpmTable(formData);
            }else{
              obj=editBpmTable(formData);
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })

          }
        })
      },
      handleCancel () {
        this.close()
      },
    },
  }
</script>

<style scoped>
    .drawer-bootom-button {
        position: absolute;
        bottom: -8px;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 2px 2px;
    }
</style>